本篇文章目錄

1. 前言：網頁佈局的兩大神器 —— Flexbox 與 Grid 怎麼選？
2. 工具卡片模組化 (.tool-card) 與 SPA 顯隱切換機制
3. 用 CSS Grid 拉出優雅的雙欄表單 (.form-grid)
4. 細節打造：表單元件與 Focus 無障礙 (a11y) 互動狀態
5. 結語

一、 前言：網頁佈局的兩大神器 —— Flexbox 與 Grid 怎麼選？

在現代 CSS 切版中，Flexbox（彈性盒模型） 與 Grid（網格系統） 是最核心的兩大排版利器：

• Flexbox (一維排版)：非常適合處理「單一方向」的元件排列，例如 <label> 與 <input> 的上下垂直對齊（flex-direction: column）。
• Grid (二維排版)：適合處理「欄與列」構成的網格結構，例如將「身高」與「體重」自動拆分為左右平行的雙欄。

在今天 [Day 06] 中，我們將結合這兩大佈局技術，打造出《醫藥健康小工具箱》中最核心的 工具卡片 (Card) 與表單佈局！

二、 工具卡片模組化 (.tool-card) 與 SPA 顯隱切換機制

為了實現單頁應用 (SPA) 切換，我們在 CSS 預設將所有工具卡片隱藏 (display: none)，只有帶有 .active 類別的卡片才會透過 JS 被喚醒顯示 (display: block)：

/components.css

三、 用 CSS Grid 拉出優雅的雙欄表單 (.form-grid)

為了讓使用者在填寫數據時不感到擁擠，我們透過 CSS Grid 的 grid-template-columns: 1fr 1fr 將表單切分為均等的左右雙欄；同時透過 .full-width 讓特定長選單（如：日常活動量）得以跨欄滿版：

/components.css

實際網站展示：

四、 細節打造：表單元件與 Focus 無障礙 (a11y) 互動狀態

最後，我們為文字標籤 <label> 與輸入框 <input>、<select> 加上優雅的質感樣式，並設定符合 a11y (無障礙) 視覺提示的 Focus 高亮效果：

/components.css

實際網站展示：

程式碼亮點解析：

1. 1fr 1fr 彈性等分：比起傳統寫死 width: 50%，1fr (Fraction) 能更完美地適應容器大小，且不會因為 padding 而破版。
2. .full-width 橫跨屬性：透過 grid-column: span 2，能讓活動量選單等需要較大顯示空間的元件自動佔滿整行。
3. transition: border-color 0.2s：當使用者將游標移入輸入框時，邊框會變為更明顯的黑色，提供流暢且舒適的操作反饋！

五、 結語

今天我們成功結合了 Flexbox 與 CSS Grid，順利拉出了乾淨、圓潤且具備高可讀性的馬卡龍工具卡片與雙欄表單！

在明天的 [Day 07] 中，我們將進入 RWD 響應式網頁設計（Responsive Web Design），學習如何使用 @media 媒體查詢，讓這套雙欄表單在手機小螢幕上自動轉為直立單欄，提供最貼心的行動端體驗！